VueCli學習筆記 Day-01-2專案資料夾介紹

一、專案資料夾結構介紹

vue-project/
├── node_modules/         # 依賴包,存放 npm 安裝的所有第三方模組
├── public/               # 公共資源目錄,會直接複製到最終的構建目錄
│   ├── favicon.ico       # 預設的網站圖示
├── src/                  # 源碼目錄,存放應用的核心代碼
│   ├── assets/           # 靜態資源(圖片、樣式等),會被 Webpack 打包
│   ├── components/       # Vue 組件目錄,用於放置可重複使用的組件
│   ├── views/            # 頁面組件,通常與路由對應
│   ├── router/           # 路由設定檔案,通常是 `index.js`
│   ├── store/            # Vuex 狀態管理檔案(若選擇使用 Vuex)
│   ├── App.vue           # 根組件
│   └── main.js           # 應用入口文件,初始化 Vue 實例
├── index.html            # 主 HTML 模板文件
├── .gitignore            # Git 忽略文件
├── babel.config.js       # Babel 配置文件
├── package.json          # 項目的描述文件,定義依賴和腳本
├── README.md             # 項目說明文檔
└── vue.config.js         # Vue CLI 配置文件(可選,用於定制 Webpack 設定)

二、main.js解釋

import './assets/main.css' //引入樣式文件 main.css。 import { createApp } from 'vue' //引入 createApp 這個功能。 import App form './App.vue' //將 App.vue 中定義的組件導入。 createApp(App)createApp() //用來創建一個Vue的實例 app.mount('#app')

這邊可以將App.vue想像成一個模板,透過createApp(App)將這個「實例」構建出來
在這個實例裡,可以執行在App.vue中定義的所有屬性、
這邊的app.mount('#app')就是將這個實例掛載至#app也就是HTMLindex.html中ID為app的元素上

三、index.html解釋

image
body中的<div id="app"></div>即是main.js定義的app.mount('#app')
<script type="module" src="/src/main.js"></script>引入了main.js檔案,並使用 type="module"指定這是一個 ES module

四、參考資料

  1. 欸你是要進 Vue 了沒? - Day5:Vue 專案資料夾你裡面夾了什麼